<template>
  <div>
    <el-select
      ref="select"
      filterable
      clearable
      style="width: 100%;"
      v-bind="$attrs"
      v-on="$listeners"
      @visible-change="v => visibleChange(v, 'select')"
    >
      <el-option v-for="(label,idx) in options" :key="idx" :value="label" :label="label" />
    </el-select>

    <vxe-modal
      v-model="visible"
      title="选项管理"
      :width="isMobile?'100%':'60%'"
      resize
      show-zoom
      transfer
      @close="getData()"
    >
      <upms-options :table-name="tableName" :column-name="columnName" />
    </vxe-modal>
  </div>
</template>

<script>
import Api from '@/api/upms/options'
import UpmsOptions from '@/views/upms/options'
export default {
  name: 'UpmsOptionsSelect',
  components: { UpmsOptions },
  props: {
    edit: {
      required: false,
      type: Boolean,
      default: true
    },
    tableName: {
      required: true,
      type: String
    },
    columnName: {
      required: true,
      type: String
    }

  },
  data() {
    return {
      options: [],
      visible: false
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      Api.page({
        baseParams: {
          tableName: this.tableName,
          columnName: this.columnName
        },
        sort: 'seq asc'
      }).then(({ data }) => {
        this.options = data.map(row => row.columnValue)
      })
    },
    closeDialog() {
      this.getData()
    },
    visibleChange(visible, refName) {
      if (visible && this.edit) {
        const ref = this.$refs[refName]
        let popper = ref.$refs.popper
        if (popper.$el) popper = popper.$el
        if (!Array.from(popper.children).some(v => v.className === 'el-cascader-menu__list')) {
          const el = document.createElement('ul')
          el.className = 'el-cascader-menu__list'
          el.style = 'border-top: solid 1px #E4E7ED; padding:0; color: #606266;'
          el.innerHTML = `<li class="el-cascader-node" style="height:38px;line-height: 38px">
                        <span class="el-cascader-node__label">选项管理</span>
                        </li>`
          popper.appendChild(el)
          el.onclick = () => {
            // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
            this.visible = true
            // 以下代码实现点击后弹层隐藏 不需要可以删掉
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false)
            } else {
              ref.visible = false
            }
          }
        }
      }
    },
    createRow() {

    }
  }
}
</script>

<style>

</style>
